<style>
  @import url(../templates/bucket.css);
  #zoomButtons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  input[type="range"] {
    width: 6em;
  }
  input[type="number"] {
    width: 5em;
  }
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
  <table>
    <tbody>
      <tr>
        <td>enabled</td>
        <td><input type="checkbox" data-bind="checked: enabled" /></td>
      </tr>
      <tr>
        <td>density</td>
        <td>
          <input
            type="range"
            data-bind="value: density, valueUpdate: 'input'"
            min="0.0001"
            max="0.002"
            step="0.0001"
          />
          <input
            type="number"
            min="0.0001"
            max="0.002"
            step="0.0001"
            data-bind="value: density"
          />
        </td>
      </tr>
      <tr>
        <td>visual density scalar</td>
        <td>
          <input
            type="range"
            min="0.01"
            max="5"
            step="0.01"
            data-bind="value: visualDensityScalar, valueUpdate: 'input'"
          />
          <input
            type="number"
            min="0.01"
            max="5"
            step="0.01"
            data-bind="value: visualDensityScalar"
          />
        </td>
      </tr>
      <tr>
        <td for="input-fogminbrightness">Fog min brightness</td>
        <td>
          <input
            type="range"
            data-bind="value: minimumBrightness, valueUpdate: 'input'"
            min="0"
            max="1"
            step="0.01"
          />
          <input
            type="number"
            data-bind="value: minimumBrightness"
            min="0"
            max="1"
            step="0.01"
          />
        </td>
      </tr>
      <tr>
        <td>sse increase factor</td>
        <td><input type="number" data-bind="value: sse" /></td>
      </tr>
      <tr>
        <td>heightScalar</td>
        <td>
          <input
            type="number"
            min="0.001"
            max="2"
            step="0.001"
            data-bind="value: heightScalar"
          />
        </td>
      </tr>
      <tr>
        <td>heightFalloff</td>
        <td>
          <input
            type="number"
            min="0"
            max="2"
            step="0.01"
            data-bind="value: heightFalloff"
          />
        </td>
      </tr>
      <tr>
        <td>maxHeight</td>
        <td>
          <input type="number" step="100" data-bind="value: maxHeight" />
        </td>
      </tr>
    </tbody>
  </table>
  <div id="zoomButtons"></div>
</div>
